var codePadding = "    ";
var wrapperSuffix = "-wrapper";
var cssList = [];
var htmlList = [];
function resetVars(){
    cssList = [];
    htmlList = [];
}

function extTreeToHtmlCode(treeNode){
	buildList(treeNode);
    var result = [];
	result.push("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n");
	result.push("<html>\n");
	result.push("<head>\n");
	result.push("<meta http-equiv=content-type content=\"text/html;charset=UTF-8\">\n")
	result.push("<style>\n");
	result.push("html,body{margin:0;padding:0;}\n");
	for(var i=0;i<cssList.length;i++){
		result.push(cssList[i].toString());
	}
	result.push("</style>\n");
	result.push("</head>\n");
	result.push("<body>\n");
	result.push(htmlList.join(""));
	result.push("\n</body>\n");
	result.push("</html>\n");
	return result.join("");
}

function buildList(treeNode){
	//generate html code
    for (var j = 0; j <= treeNode.getDepth(); j++) {
        htmlList.push(codePadding);
    }
	
    var divId = treeNode.text;
	var nodeWidth = treeNode.attributes.width;
    var nodeHeight = treeNode.attributes.height;
    var nodePaddingTop = treeNode.attributes.paddingTop;
    var nodePaddingBottom = treeNode.attributes.paddingBottom;
    var nodePaddingLeft = treeNode.attributes.paddingLeft;
    var nodePaddingRight = treeNode.attributes.paddingRight;
    var hasWrapper = false;
    if ((nodeWidth || nodeHeight) && (nodePaddingTop || nodePaddingBottom || nodePaddingLeft || nodePaddingRight)) {
        hasWrapper = true;
    }
	
	if(hasWrapper){
		htmlList.push("<div id=\"");
	    htmlList.push(divId+wrapperSuffix);
	    htmlList.push("\">\n");
		for (var j = 0; j <= treeNode.getDepth(); j++) {
	        htmlList.push(codePadding);
	    }
	}
	
	htmlList.push("<div id=\"");
    htmlList.push(divId);
    htmlList.push("\">");
    htmlList.push("\n");
    for (var i = 0; i < treeNode.childNodes.length; i++) {
        buildList(treeNode.childNodes[i]);
        htmlList.push("\n");
    }
    for (var j = 0; j <= treeNode.getDepth(); j++) {
        htmlList.push(codePadding);
    }
    htmlList.push("</div>");
	
	if (hasWrapper) {
		htmlList.push("\n");
		for (var j = 0; j < treeNode.getDepth(); j++) {
	        htmlList.push(codePadding);
	    }
		htmlList.push("</div>");
	}
	
	//generate css code
	var newCssItem = new cssItem(divId);
	if(hasWrapper){
		var newCssItemWrapper = new cssItem(divId+wrapperSuffix);
		newCssItemWrapper.atts.push("overflow:hidden;")
		if(nodeWidth){
			newCssItemWrapper.atts.push(fixWidthHeight("width:",nodeWidth));
		}
		if(nodeHeight){
			newCssItemWrapper.atts.push(fixWidthHeight("height:",nodeHeight));
		}
		if(treeNode.parentNode&&treeNode.parentNode.attributes.direction=="h"){
			newCssItemWrapper.atts.push("float:left;");
		}
		if(treeNode.attributes.backColor){
			newCssItemWrapper.atts.push("background-color:" + treeNode.attributes.backColor + ";");
		}
		if(treeNode.attributes.alignCenter){
			newCssItemWrapper.atts.push("margin:auto;");
		}
		cssList.push(newCssItemWrapper);
	}else{
		if(nodeWidth){
			newCssItem.atts.push(fixWidthHeight("width:",nodeWidth));
		}
		if(nodeHeight){
			newCssItem.atts.push(fixWidthHeight("height:",nodeHeight));
		}
		if(treeNode.attributes.backColor){
			newCssItem.atts.push("background-color:" + treeNode.attributes.backColor + ";");
		}
		if(treeNode.attributes.alignCenter){
			newCssItem.atts.push("margin:auto;");
		}
	}
	var top,bottom,left,right;
	top = nodePaddingTop ? nodePaddingTop+"px " : "0px ";
	bottom = nodePaddingBottom ? nodePaddingBottom+"px " : "0px ";
	left = nodePaddingLeft ? nodePaddingLeft+"px " : "0px ";
	right = nodePaddingRight ? nodePaddingRight+"px " : "0px ";
	if(nodePaddingTop || nodePaddingBottom || nodePaddingLeft || nodePaddingRight){
		newCssItem.atts.push("margin:" + top + right + bottom + left + ";");
	}
	if(treeNode.parentNode&&treeNode.parentNode.attributes.direction=="h"){
		newCssItem.atts.push("float:left;");
	}
	cssList.push(newCssItem);
}

function cssItem(cssId){
	this.cssId = cssId;
	this.atts = [];
	this.toString = function(){
		var cssString = [];
		cssString.push(codePadding);
		cssString.push("#");
		cssString.push(this.cssId)
		cssString.push("{\n");
		for(var i=0;i<this.atts.length;i++){
			cssString.push(codePadding+codePadding);
			cssString.push(this.atts[i]);
			cssString.push("\n");
		}
		cssString.push(codePadding);
		cssString.push("}\n");
		return cssString.join("");
	}
}

function fixWidthHeight(widthOrHeight,value){
	return  widthOrHeight + value + (value.indexOf("%") > -1 ? ";" : "px;");
}
